<template>
  <div id="WithdrawTable">
    <el-table
      border style="width: 100%"
      empty-text="暂无提现数据"
      :data="widthdrawData"
    >
      <el-table-column
        prop="accountMainNickname"
        label="客户名称">
      </el-table-column>
      <el-table-column
        prop="totalAmount"
        label="佣金">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="申请提现">
      </el-table-column>
      <el-table-column
        prop="applyTime"
        label="申请时间">
      </el-table-column>
      <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          {{scope.row.state | handleState}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state === 3 || scope.row.state === 9"
            type="warning" size="small"
            @click="lookErrDetailClick(scope.row.withdrawId)"
          >
            查看详情
          </el-button>
          <span v-if="scope.row.state === 0">
            <el-button
              type="text" size="small"
              @click="agreeBtnClick(scope.row.withdrawId)"
            >
              同意
            </el-button>
            <el-button
              type="text" size="small" style="color: #dd6161"
              @click="rejectBtnClick(scope.row.withdrawId)"
            >
              拒绝
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 同意提现Dialog -->
    <el-dialog
      title="提示"
      :visible.sync="agreeDiaVis"
    >
      <div class="agree_dia_txt_item">
        <span class="label_txt">持卡人：</span>
        <span class="content">小李子</span>
      </div>
      <div class="agree_dia_txt_item">
        <span class="label_txt">卡号：</span>
        <span class="content">312323232132132 交通银行</span>
      </div>
      <div class="agree_dia_txt_item">
        <span class="label_txt">提现金额：</span>
        <span class="content">￥200</span>
      </div>
      <!--<div class="agree_dia_txt_item">-->
        <!--<span class="label_txt">交易凭证：</span>-->
        <!--<span class="content"></span>-->
      <!--</div>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="agreeDiaVis = false">取 消</el-button>
        <el-button
          type="primary" @click="afreeRefundOkClick"
          :loading="okLoading"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 拒绝提现Dialog -->
    <el-dialog
      title="提示"
      :visible.sync="refusedDiaVis"
      width="30%"
    >
      <span>确认要拒绝客户的提现申请吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refusedDiaVis = false">取 消</el-button>
        <el-button
          type="danger" @click="rejectRefundOkClick"
          :loading="okLoading"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 查看异常订单详情 Dialog -->
    <el-dialog
      title="详情信息"
      :visible.sync="lookErrorDetailVis"
    >
      <div class="err_detail" v-if="errDetail">
        <el-row>
          <el-col :span="6">
            <span>手续费：</span>
          </el-col>
          <el-col :span="18">
            <span>{{errDetail.cmmsAmount || '无'}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>处理时间：</span>
          </el-col>
          <el-col :span="18">
            <span>{{errDetail.applyTime}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>备注信息：</span>
          </el-col>
          <el-col :span="18">
            <span>{{errDetail.remarkAdmin}}</span>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookErrorDetailVis = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'WithdrawTable',
  props: [
    'widthdrawData'
  ],
  data () {
    return {
      beHandlingRow: null,
      agreeDiaVis: false,
      refusedDiaVis: false,
      okLoading: false,
      lookErrorDetailVis: false,
      errDetail: null
    }
  },
  filters: {
    handleState: value => { // 过滤状态显示
      switch (value) {
        case 0:
          return '待审批'
        case 1:
          return '审批通过'
        case 2:
          return '审批拒绝'
        case 3:
          return '已入账'
        case 4:
          return '初审通过'
        case 5:
          return '初审拒绝'
        case 6:
          return '打款中'
        case 9:
          return '错误'
      }
    }
  },
  methods: {
    agreeBtnClick (id) { // 同意退款按钮点击
      this.beHandlingRow = id
      this.agreeDiaVis = true
    },
    rejectBtnClick (id) { // 拒绝退款按钮点击
      this.beHandlingRow = id
      this.refusedDiaVis = true
    },
    async afreeRefundOkClick () {
      const id = this.beHandlingRow
      this.okLoading = true
      const response = await API.permitRefund({ id })
      this.okLoading = false
      const { code } = response
      if (code === 1) {
        this.agreeDiaVis = false
        const typeList = response.data
        this.typeList = typeList
        this.$emit('reloadPage')
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    async rejectRefundOkClick () {
      const id = this.beHandlingRow
      this.okLoading = true
      const response = await API.rejectRefund({ id })
      this.okLoading = false
      const { code } = response
      if (code === 1) {
        this.refusedDiaVis = false
        const typeList = response.data
        this.typeList = typeList
        this.$emit('reloadPage')
      } else {
        this.$message.error(ErrorConfig[code])
      }
    },
    async lookErrDetailClick (id) {
      const loading = this.$loading({
        text: '加载中',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      const response = await API.getWithdrawErrDetail({ id })
      loading.close()
      const { code, data } = response
      if (code === 1) {
        this.errDetail = data
        this.lookErrorDetailVis = true
      } else {
        this.$message.error(ErrorConfig[response.code])
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .demo-table-expand {
    font-size: 0;
    label {
      width: 90px;
      color: #99a9bf;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 33.33%;
    }
  }
  .el-button {
    margin: 0 10px 0 0;
  }

  .agree_dia_txt_item {
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    span.label_txt {
      display: inline-block;
      width: 100px;
      font-weight: 500;
    }
  }

  .err_detail {
    .el-row {
      margin-bottom: 10px;
      .el-col {
        &:first-child {
          font-weight: 500;
        }
      }
    }
  }
</style>
